<template>
  <div id="app">
    <el-container class="container">

            <!--      左侧边栏导航区域-->
            <el-aside width="200px" class="aside">

                <el-menu
                        active-text-color="red"
                        background-color=" #ecf0f1"
                        default-active="1"
                        class="el-menu-vertical-demo">

                    <el-menu-item index="1" @click="turnpath('/discovery')">
                        <i class="el-icon-search"></i>
                        <span slot="title">热搜音乐</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="turnpath('/recommendMusicList')">
                        <i class="el-icon-headset"></i>
                        <span slot="title">推荐歌单</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="turnpath('/newmv')">
                        <i class="el-icon-document"></i>
                        <span slot="title">最新MV</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="turnpath('/userinfo')">
                        <i class="el-icon-setting"></i>
                        <span slot="title">用户信息</span>
                    </el-menu-item>

                </el-menu>
            </el-aside>
            <!--  右侧主题内容区域-->
            <el-container >

                <!--        头部区域-->
                <div class="header">
                    <el-header >
                    </el-header>
                </div>

                <!--        主体内容区域-->
                <div class="maincontainer">
                    <!--            搜索栏-->
                    <div style="height: 30px;width: 180px;margin:0 auto;" v-if="$route.path=='/discovery'"><el-input v-model="input" placeholder="搜索" @change="toResult()" ></el-input></div>
                    <!--            主要展示区-->
                    <el-main class="main">
                        <router-view></router-view>
                    </el-main>
                </div>


                <!--        底部区域-->
                <el-footer class="footer">
                    <div style="width: 80%"><audio controls autoplay style="width: 100%" :src="$store.state.thisMusic.url"></audio></div>
                    <div  class="collection" @click="coll()">收藏</div>
                    <div  class="collection2" @click="turnpath('/collection')">收藏列表</div>

                </el-footer>

            </el-container>


        </el-container>

<!--      登录提示框-->
      <el-dialog
              title="登录"
              :visible.sync="dialogVisible"
              width="30%"
              :show-close=false>
          <el-form ref="loginForm" :model="loginFrom" label-width="70px" :rules="rules" >
              <!-- 用户名 -->
              <el-form-item label="账号"
                            prop="user">
                  <el-input v-model="loginFrom.account"
                            show-word-limit></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item label="密码"
                            prop="password"
                           >
                  <el-input v-model="loginFrom.password"
                            type="password"
                            maxlength=""
                            show-word-limit></el-input>
              </el-form-item>
          </el-form>


          <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="iflogin()">确 定</el-button>
  </span>
      </el-dialog>

  </div>
</template>

<script>
    export default {
        name:'App',
        data(){
            var userRules = (rule, value, callback) => {
                if (value.length.length < 3 || value.length > 8) {
                    return callback(new Error('用户名的长度限制在3-12之间'));
                }
                callback()
            }
            var passwordRules = (rule, value, callback) => {
                value = value + ''
                if (value.length.length < 5 || value.length > 10) {
                    return callback(new Error('密码的长度限制在5-10之间'));
                }
            }
            return{
                input:'',
                dialogVisible:true,
                loginFrom: {
                    account: '',
                    password: '',
                },
                // 验证规则
                rules: {
                    user: [
                        { required: true, validator: userRules, trigger: 'blur' }
                    ],
                    password: [
                        { required: true, validator: passwordRules, trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            this.iftrue()
        },
        methods:{
            turnpath(val){
                this.$router.push(val)
            },
            toResult(){
                this.$router.push({
                    path:`/result/${this.input}`,
                })
                console.log(this.input)
            },
            coll(){
                this.$store.commit('addCollectionMusicList')
                console.log(this.$store.state.collectionMusicList)
            },
            iflogin(){
                console.log(this.loginFrom.account)
                    if(this.$store.state.user.account===this.loginFrom.account && this.$store.state.user.password===this.loginFrom.password){
                                this.$store.commit('addtoken')
                    }
                    this.iftrue()

            },
            iftrue(){
                if(this.$store.state.token){
                    this.dialogVisible=false
                }
            }
        },
        components:{

        }


    }
</script>
<style>
  #app{
    width: 100%;
    height: 100%;
  }
  el-header, el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 30px;
  }

  el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) el-aside,
  .el-container:nth-child(6) el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) el-aside {
    line-height: 320px;
  }
  .container{
    height: 100%;
  }
  .aside{
    height: 100%;
    background-color: #ecf0f1;
  }
  .header{
    height: 30px;
  }
  .footer{
      display: flex;
    background-color: #ecf0f1;
  }
  .main{

  }
  .maincontainer{
    margin: 0 auto;
    width: 90%;
    height: 100%;

      overflow: scroll;
  }
    .collection{
             margin-top: 15px;
             height: 30px;
             width: 40px;
             border: 1px solid #636e72;
             line-height: 190%;
             text-align: center;
             border-radius: 10px
         }
  .collection2{
      margin-left: 10px;
      margin-top: 15px;
      height: 30px;
      width: 80px;
      border: 1px solid #636e72;
      line-height: 190%;
      text-align: center;
      border-radius: 10px
  }
    .collection:hover{
        cursor:pointer
    }
</style>
